<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>安检单-登记安检结果</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<style>
			html,
			body,
			.mui-content {
				height: 0px;
				margin: 0px;
				background-color: #efeff4;
			}
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
			* {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
			p {
				text-indent: 22px;
			}
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			#info {
				padding: 20px 10px;
			}
			.des {
				margin: .5em 0;
			}
			.des>li {
				font-size: 14px;
				color: #8f8f94;
			}
				.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			p img {
				max-width: 100%;
				height: auto;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">安检单-登记安检结果</h1>
				<a href="#picture" class="mui-btn mui-btn-block" style="width: 20%;float: right;">菜单</a>
		</header>
		
		<div class="mui-content">
			<div class="mui-card" style="padding-bottom: 10px;">
					<div class="mui-input-row">
						<label><font style="color: red;">*</font>气表底数</label>
							<input type="text" class="mui-input-clear" placeholder="请输入气表底数"  style="width: 50%;float: left;">
						<label style="float: right;width:15%;">m³</label>
					</div>
					
					<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">气密性</a>
						<div id="M_Toggle" class="mui-switch mui-active">
							<div class="mui-switch-handle"></div>
						</div>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
						<label>1.软管及连接处漏气</label>
						<input name="checkbox" value="Item 1" type="checkbox" >
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
						<label>2.炉具及连接处漏气</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
						<label>3.用户私改管段处漏气</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
						<label>4.隐患4</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
						</ul>
					</li>
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">设施完整性</a>
						<div id="M_Toggle" class="mui-switch mui-active">
							<div class="mui-switch-handle"></div>
						</div>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
						<label>6.隐患6</label>
						<input name="checkbox" value="Item 1" type="checkbox" >
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
						<label>7.隐患7</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
						<label>8.隐患8</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
					<label>9.隐患9</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
					<label>10.隐患10</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
					<label>11.隐患11</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
					<label>12.隐患12</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
					<label>13.隐患13</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
						</ul>
					</li>
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">气运行合规性</a>
						<div id="M_Toggle" class="mui-switch mui-active">
							<div class="mui-switch-handle"></div>
						</div>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
						<label>15.隐患15</label>
						<input name="checkbox" value="Item 1" type="checkbox" >
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
						<label>16.隐患16</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
						<label>17.隐患17</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
						<label>13.隐患13</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
						</ul>
					</li>
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">功能完好性</a>
						<div id="M_Toggle" class="mui-switch mui-active">
							<div class="mui-switch-handle"></div>
						</div>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
						<label>34.隐患34</label>
						<input name="checkbox" value="Item 1" type="checkbox" >
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
							<label>35.隐患35</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
							<label>36.隐患36</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
					<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox mui-left">
							<label>37.隐患37</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div></li>
						</ul>
					</li>
						</ul>
					</li>
				</ul>
				<div class="mui-input-row">
						<label>其他</label>
							<input type="text"  disabled="disabled"  class="mui-input-clear" placeholder="" value="">
					</div>
					<div class="mui-input-row">
						<label>是否对用户进行宣讲</label>
						<div id="M_Toggle" class="mui-switch mui-active">
							<div class="mui-switch-handle"></div>
						</div>
					</div>
					<div class="mui-input-row">
						<label>安检结果</label>
						<input type="text"  disabled="disabled"  class="mui-input-clear" placeholder="" value="">
					</div>
					<div class="mui-input-row">
						<label>用户签字</label>
						<input type="text"  disabled="disabled"  class="mui-input-clear" placeholder="" value="">
					</div>
					<div class="mui-input-row">
						<label>附件</label>
						<input type="text"  disabled="disabled"  class="mui-input-clear" placeholder="" value="在下面选择要上传的附件">
						<img src="../images/muwu.jpg" data-preview-src="" data-preview-group="1" />
					</div>
					<div class="mui-input-row">
						<label style="width: 100%;">隐患整改共计XX处</label>
					</div>
					<div class="mui-input-row">
						<label>整改办法</label>
						<div class="mui-input-row mui-checkbox mui-left">
						<label>由用户自行整改</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<label>由燃气公司协助用户整改</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<label>由执法大队执行执法程序</label>
						<input name="checkbox" value="Item 2" type="checkbox" checked>
					</div>
					</div>
					<div class="mui-input-row">
						<label>安检员签字</label>
						<input type="text"  disabled="disabled"  class="mui-input-clear" placeholder="" value="王通">
					</div>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/mui.picker.min.js"></script>
	<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/mui.zoom.js"></script>
	<script src="../js/mui.previewimage.js"></script>
	<script>
		
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		mui.previewImage();
		mui('.mui-left').on('change', 'input', function() {
			var value = this.checked?"true":"false";
			this.previousElementSibling.innerText = "checked："+value;
		});
		mui('body').on('shown', '.mui-popover', function(e) {
			//console.log('shown', e.detail.id);//detail为当前popover元素
		});
		mui('body').on('hidden', '.mui-popover', function(e) {
			//console.log('hidden', e.detail.id);//detail为当前popover元素
		});
		var info = document.getElementById("info");
		mui('body').on('tap', '.mui-popover-action li>a', function() {
			var a = this,
				parent;
			//根据点击按钮，反推当前是哪个actionsheet
			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
				if (parent.classList.contains('mui-popover-action')) {
					break;
				}
			}
			//关闭actionsheet
			mui('#' + parent.id).popover('toggle');
			info.innerHTML = "你刚点击了\"" + a.innerHTML + "\"按钮";
		})
		window.addEventListener('toggle', function(event) {
			if (event.target.id === 'M_Toggle') {
				var isActive = event.detail.isActive;
				var table = document.querySelector('.mui-table-view');
				var card = document.querySelector('.mui-card');
				if (isActive) {
					card.appendChild(table);
					card.style.display = '';
				} else {
					var content = document.querySelector('.mui-content');
					content.insertBefore(table, card);
					card.style.display = 'none';
				}
			}
		});
		(function($) {
				$.init();
				var result = $('#result')[0];
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						var picker = new $.DtPicker(options);
						picker.show(function(rs) {
							/*
							 * rs.value 拼合后的 value
							 * rs.text 拼合后的 text
							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
							 * rs.m 月，用法同年
							 * rs.d 日，用法同年
							 * rs.h 时，用法同年
							 * rs.i 分（minutes 的第二个字母），用法同年
							 */
							result.innerText = '选择结果: ' + rs.text;
							/* 
							 * 返回 false 可以阻止选择框的关闭
							 * return false;
							 */
							/*
							 * 释放组件资源，释放后将将不能再操作组件
							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
							 */
							picker.dispose();
						});
					}, false);
				});
			})(mui);
			(function($, doc) {
				$.init();
				$.ready(function() {
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: 'ywj',
						text: '董事长 叶文洁'
					}, {
						value: 'aaa',
						text: '总经理 艾AA'
					}, {
						value: 'lj',
						text: '罗辑'
					}, {
						value: 'ymt',
						text: '云天明'
					}, {
						value: 'shq',
						text: '史强'
					}, {
						value: 'zhbh',
						text: '章北海'
					}, {
						value: 'zhy',
						text: '庄颜'
					}, {
						value: 'gyf',
						text: '关一帆'
					}, {
						value: 'zhz',
						text: '智子'
					}, {
						value: 'gezh', 
						text: '歌者'
					}]);
					var showUserPickerButton = doc.getElementById('showUserPicker');
					var userResult = doc.getElementById('userResult');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							userResult.innerText = JSON.stringify(items[0]);
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
				});
			})(mui, document);
	</script>
</html>